<template>
  <div class="config-test-page">
    <div class="test-header">
      <h1>配置组件测试页面</h1>
      <div class="test-actions">
        <el-button type="primary" @click="loadTestData">加载测试数据</el-button>
        <el-button @click="getDataFromComponents">获取组件数据</el-button>
        <el-button @click="validateComponents">验证表单</el-button>
        <el-button @click="resetComponents">重置表单</el-button>
      </div>
    </div>

    <div class="test-content">
      <!-- 基础参数设定组件 -->
      <BaseParametersConfig 
        ref="baseParamsRef"
        v-model="baseParams"
        :collapsed="false"
      />

      <!-- 工作时间配置组件 -->
      <WorkTimeConfig 
        ref="workTimeRef"
        v-model="workTimeConfig"
        :collapsed="false"
      />

      <!-- 数据展示区域 -->
      <div class="data-display">
        <h3>组件数据实时显示：</h3>
        <div class="data-section">
          <h4>基础参数：</h4>
          <pre>{{ JSON.stringify(baseParams, null, 2) }}</pre>
        </div>
        <div class="data-section">
          <h4>工作时间配置：</h4>
          <pre>{{ JSON.stringify(workTimeConfig, null, 2) }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import BaseParametersConfig from '@/components/BaseParametersConfig.vue'
import WorkTimeConfig from '@/components/WorkTimeConfig.vue'

export default {
  name: 'ConfigTestPage',
  components: {
    BaseParametersConfig,
    WorkTimeConfig
  },
  setup() {
    // 组件引用
    const baseParamsRef = ref(null)
    const workTimeRef = ref(null)

    // 数据
    const baseParams = ref({
      startTime: null,
      endTime: null,
      selectedAlgorithm: null,
      useOvertime: false,
      balanceCapacity: false
    })

    const workTimeConfig = ref([])

    // 加载测试数据
    const loadTestData = () => {
      const testBaseParams = {
        startTime: '08:00',
        endTime: '18:00',
        selectedAlgorithm: 'algoA',
        useOvertime: true,
        balanceCapacity: false
      }

      const testWorkTimeConfig = [
        {
          day: 1,
          dayName: '星期一',
          expanded: true,
          workPeriods: [
            { startTime: '08:00', endTime: '12:00', error: '' },
            { startTime: '13:00', endTime: '17:00', error: '' }
          ],
          overtimePeriod: {
            startTime: '18:00',
            endTime: '20:00',
            error: ''
          }
        }
      ]

      // 通过组件方法加载数据
      if (baseParamsRef.value) {
        baseParamsRef.value.loadData(testBaseParams)
      }

      if (workTimeRef.value) {
        workTimeRef.value.loadData(testWorkTimeConfig)
      }

      ElMessage.success('测试数据加载完成')
    }

    // 获取组件数据
    const getDataFromComponents = () => {
      let baseData = null
      let workTimeData = null

      if (baseParamsRef.value) {
        baseData = baseParamsRef.value.getFormData()
      }

      if (workTimeRef.value) {
        workTimeData = workTimeRef.value.getFormData()
      }

      console.log('基础参数数据:', baseData)
      console.log('工作时间数据:', workTimeData)

      ElMessage.info('数据已输出到控制台')
    }

    // 验证组件
    const validateComponents = () => {
      const errors = []

      if (baseParamsRef.value) {
        const baseValidation = baseParamsRef.value.validateForm()
        if (!baseValidation.valid) {
          errors.push('基础参数: ' + baseValidation.errors.join(', '))
        }
      }

      if (workTimeRef.value) {
        const workTimeValidation = workTimeRef.value.validateForm()
        if (!workTimeValidation.valid) {
          errors.push('工作时间: ' + workTimeValidation.errors.join(', '))
        }
      }

      if (errors.length === 0) {
        ElMessage.success('所有表单验证通过')
      } else {
        ElMessage.error('验证失败: ' + errors.join('; '))
      }
    }

    // 重置组件
    const resetComponents = () => {
      if (baseParamsRef.value) {
        baseParamsRef.value.resetForm()
      }

      if (workTimeRef.value) {
        workTimeRef.value.resetForm()
      }

      ElMessage.success('所有表单已重置')
    }

    return {
      baseParamsRef,
      workTimeRef,
      baseParams,
      workTimeConfig,
      loadTestData,
      getDataFromComponents,
      validateComponents,
      resetComponents
    }
  }
}
</script>

<style scoped>
.config-test-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-header {
  margin-bottom: 30px;
  text-align: center;
}

.test-header h1 {
  color: #714B67;
  margin-bottom: 20px;
}

.test-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.test-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.data-display {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.data-display h3 {
  color: #714B67;
  margin-bottom: 15px;
}

.data-section {
  margin-bottom: 20px;
}

.data-section h4 {
  color: rgb(1, 128, 165);
  margin-bottom: 10px;
}

.data-section pre {
  background: white;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
  font-size: 12px;
}

@media (max-width: 768px) {
  .test-content {
    grid-template-columns: 1fr;
  }

  .test-actions {
    flex-direction: column;
    align-items: center;
  }

  .test-actions .el-button {
    width: 200px;
  }
}
</style>
